<template>
  <div class="home">
    <my-title></my-title>
    <p>我是变量的展示{{ mixNum }}</p>
    <p>{{ getMsg() }}</p>
    <!-- <button @click="">获取字符串</button> -->
  </div>
</template>

<script>
import myTitle from "../components/mYtitle.vue";
// getCurrentInstance // get 是获取的意思 Current 当前 Instance 实例
import { ref, getCurrentInstance, onMounted } from "vue";
import mixin from "../mixin";
export default {
  name: "HomeView",
  components: { myTitle },
  mixins: [mixin],
  // data() {
  //   return {
  //     mixNum: 40,
  //   };
  // },
  // 当变量名称一样的时候，页面会覆盖混入的变量。
  // 混入的生命周期先执行。
  // created() {
  //   console.log("我页面的声明周期");
  //   console.log(this.mixNum);
  // },
  setup(props) {
    // console.log(this);
    const color = "green";
    const { proxy } = getCurrentInstance();
    // console.log(proxy);
    // setTimeout(() => {
    //   console.log(proxy.mixNum);
    // }, 100);
    onMounted(() => {
      console.log(proxy.mixNum);
      console.log(proxy.getMsg());
    });
    const obj = ref({
      msg: true,
    });
    return {
      obj,
      color,
    };
  },
};
</script>
<style lang="scss" scoped>
p {
  color: v-bind(color);
}
</style>